import React from 'react';
import { Form, Select, Card, Breadcrumb, Icon, Radio, Checkbox, Button, Row, Col, DatePicker, Input, InputNumber, Tooltip, Mentions, } from 'antd';
import axios from '../../components/Engineering/axios'
import MentionsAsyncLoad from './components/mentions-async-load'
import MentionsControl from './components/mentions-control'
import MentionsCustomTriggeCharacter from './components/mentions-custom-trigge-character'
import '@/utils/app.css'

const { Search, TextArea } = Input
const { Option, OptGroup } = Select;
const FormItem = Form.Item;


class KimMentions extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      disabled: true
    }
  }
  render() {
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },

      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      }
    }


    function getOptions() {
      return [<Option key={1} value="沈莹">沈莹</Option>,
      <Option key={2} value="吴小英">吴小英</Option>,
      <Option key={3} value="刘清华">刘清华</Option>,]
    }

    return (
      <>
        <Card title='基本使用、向上展开' style={{ marginTop: 10 }} >
          <Mentions style={{ width: '25%',marginRight:20 }} defaultValue="@" autoFocus placement="top"
            onChange={value => console.log('Change:', value)}
            onSelect={option => console.log('Select', option)}
          >
            {getOptions()}
          </Mentions>
          <Mentions disabled style={{ width: '25%',marginRight:20 }} >> {getOptions()} </Mentions>
          <Mentions readOnly style={{ width: '25%',marginRight:20 }} >> {getOptions()} </Mentions>

        </Card>

        <Card title='匹配内容列表为异步返回时' style={{ marginTop: 10 }}>
          <MentionsAsyncLoad />
        </Card>


        <Card title='受控模式，例如配合 Form 使用' style={{ marginTop: 10 }}>
          <MentionsControl />
        </Card>

        <Card title='自定义触发字符' style={{ marginTop: 10 }}>
          <MentionsCustomTriggeCharacter />
        </Card>


      </>
    )

  }
}

export default Form.create({ name: 'KimMentions' })(KimMentions)



// Mentions#
// 参数	                   说明	类型	默认值	版本
// autoFocus	             自动获得焦点	boolean	false	3.19.0
// defaultValue	           默认值	string	-	3.19.0
// filterOption	           自定义过滤逻辑	false | (input: string, option: OptionProps) => boolean	-	3.19.0
// notFoundContent	       当下拉列表为空时显示的内容	ReactNode	'Not Found'	3.19.0
// placement	             弹出层展示位置	'top' | 'bottom'	'bottom'	3.19.0
// prefix	                 设置触发关键字	string | string[]	'@'	3.19.0
// split	                 设置选中项前后分隔符	string	' '	3.19.0
// validateSearch	         自定义触发验证逻辑	(text: string, props: MentionsProps) => void	-	3.19.0
// value	                 设置值	string	-	3.19.0
// onChange	               值改变时触发	(text: string) => void	-	3.19.0
// onSelect	               选择选项时触发	(option: OptionProps, prefix: string) => void	-	3.19.0
// onSearch	               搜索时触发	(text: string, prefix: string) => void	-	3.19.0
// onFocus	               获得焦点时触发	() => void	-	3.19.0
// onBlur	                 失去焦点时触发	() => void	-	3.19.0
// getPopupContainer	     指定建议框挂载的 HTML 节点	() => HTMLElement	-	3.22.0

// Mentions 方法#
// 名称	                   描述	版本
// blur()	                 移除焦点	3.19.0
// focus()	               获取焦点	3.19.0

// Option#
// 参数	                   说明	类型	默认值	版本
// children	               选项内容	ReactNode	-	3.19.0
// value	                 选择时填充的值	string	''	3.19.0